<p><button type="button" data-target="modal-full-screen" class="tlp-button-primary">Open full screen modal</button></p>
<p><button type="button" data-target="modal-info" class="tlp-button-info">Open info modal</button></p>
<p><button type="button" data-target="modal-success" class="tlp-button-success">Open success modal</button></p>
<p><button type="button" data-target="modal-warning" class="tlp-button-warning">Open warning modal</button></p>
<p><button type="button" data-target="modal-danger" class="tlp-button-danger">Open danger modal</button></p>

<div id="modal-full-screen" class="tlp-modal tlp-modal-full-screen" role="dialog" aria-labelledby="modal-full-screen-label">
      <div class="tlp-modal-header">
          <h1 class="tlp-modal-title" id="modal-full-screen-label">Modal title</h1>
          <div class="tlp-modal-close" data-dismiss="modal" aria-label="Close">
              ×
          </div>
      </div>
      <div class="tlp-modal-body">
          <h2 class="tlp-modal-subtitle">Subtitle</h2>
          <p>One fine body…</p>
      </div>
      <div class="tlp-modal-footer">
          <button type="button" class="tlp-button-primary tlp-button-outline tlp-modal-action" data-dismiss="modal">Cancel</button>
          <button type="button" class="tlp-button-primary tlp-modal-action">Action</button>
      </div>
</div>

<div id="modal-info" class="tlp-modal tlp-modal-info" role="dialog" aria-labelledby="modal-info-label">
      <div class="tlp-modal-header">
          <h1 class="tlp-modal-title" id="modal-info-label">Modal title</h1>
          <div class="tlp-modal-close" data-dismiss="modal" aria-label="Close">
              ×
          </div>
      </div>
      <div class="tlp-modal-body">
          <h2 class="tlp-modal-subtitle">Subtitle</h2>
          <p>One fine body…</p>
      </div>
      <div class="tlp-modal-footer">
          <button type="button" class="tlp-button-info tlp-button-outline tlp-modal-action" data-dismiss="modal">Cancel</button>
          <button type="button" class="tlp-button-info tlp-modal-action">Action</button>
      </div>
</div>

<div id="modal-success" class="tlp-modal tlp-modal-success" role="dialog" aria-labelledby="modal-success-label">
      <div class="tlp-modal-header">
          <h1 class="tlp-modal-title" id="modal-success-label">Modal title</h1>
          <div class="tlp-modal-close" data-dismiss="modal" aria-label="Close">
              ×
          </div>
      </div>
      <div class="tlp-modal-body">
          <h2 class="tlp-modal-subtitle">Subtitle</h2>
          <p>One fine body…</p>
      </div>
      <div class="tlp-modal-footer">
          <button type="button" class="tlp-button-success tlp-button-outline tlp-modal-action" data-dismiss="modal">Cancel</button>
          <button type="button" class="tlp-button-success tlp-modal-action">Action</button>
      </div>
</div>

<div id="modal-warning" class="tlp-modal tlp-modal-warning" role="dialog" aria-labelledby="modal-warning-label">
      <div class="tlp-modal-header">
          <h1 class="tlp-modal-title" id="modal-warning-label">Modal title</h1>
          <div class="tlp-modal-close" data-dismiss="modal" aria-label="Close">
              ×
          </div>
      </div>
      <div class="tlp-modal-body">
          <h2 class="tlp-modal-subtitle">Subtitle</h2>
          <p>One fine body…</p>
      </div>
      <div class="tlp-modal-footer">
          <button type="button" class="tlp-button-warning tlp-button-outline tlp-modal-action" data-dismiss="modal">Cancel</button>
          <button type="button" class="tlp-button-warning tlp-modal-action">Action</button>
      </div>
</div>

<div id="modal-danger" class="tlp-modal tlp-modal-danger" role="dialog" aria-labelledby="modal-danger-label">
      <div class="tlp-modal-header">
          <h1 class="tlp-modal-title" id="modal-danger-label">Modal title</h1>
          <div class="tlp-modal-close" data-dismiss="modal" aria-label="Close">
              ×
          </div>
      </div>
      <div class="tlp-modal-body">
          <h2 class="tlp-modal-subtitle">Subtitle</h2>
          <p>One fine body…</p>
      </div>
      <div class="tlp-modal-footer">
          <button type="button" class="tlp-button-danger tlp-button-outline tlp-modal-action" data-dismiss="modal">Cancel</button>
          <button type="button" class="tlp-button-danger tlp-modal-action">Action</button>
      </div>
</div>
